<template>
	<view>
		<h5_header>举报</h5_header>
		<view class="report">
			<view class="top">
				<view class="h1">
					内容违规
				</view>
				<view class="ul">
					<view class="li">
						<radio-group class="group" @change="radioChange">
							<label v-for="(item, index) in items" :key="item">
								<view>
									<radio :value="item" :checked="item === current" />
								</view>
								<view>{{item}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="top center">
				<view class="h1">
					侵犯权益
				</view>
				<view class="ul">
					<view class="li">
						<radio-group class="group" @change="radioChange1">
							<label v-for="(item, index) in items1" :key="item">
								<view>
									<radio :value="item" :checked="item === current1" />
								</view>
								<view>{{item}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="top center2 center">
				<view class="h1">
					举报描述
					<textarea v-model="textarea" placeholder="请描述你遇到的问题" maxlength="200" />
					<view class="i">
					{{textarea.length}}/200
				</view>
			</view>
		</view>
		<!-- <view class="top center bottom">
			<view class="h1">
				证明材料
			</view>
			<view class="main_upload">
				<view class="img_preview" v-for="(v, i) in imgArr" :key="v">
					<img :src="v" alt="" />
					<i @click="detele(i)"></i>
				</view>
				<view class="card-upload" v-if="imgArr.length != 5" @click="handleChooseImg">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/upload12.png" mode=""></image>
				</view>
			</view>
			<view class="txt">
				请具体指出内容哪些部分存在侵权，并提供构成侵权的初步
				证据。法人或非法人组织投诉请提供加盖公章的投诉通知。
			</view>
		</view> -->
	
		</view>
		<view class="btn1" @click="handleSave">
			<view class="btn">
				完成
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUploadImage
	} from "@/api/common/index.js";
	import h5_header from "@/components/h5_header.vue"
	export default {
		components: {
			h5_header
		},
		data() {
			return {
				items: ["内容质量差", "旧闻重复", "内容不实", "标题夸张", "题文不符", "低俗色情", "广告软文", "封面反感", "抄袭别人作品", "其他问题"],
				items1: ["抄袭我的作品", "侵犯名誉/商誉/隐私/肖像权等"],
				current: "",
				current1:"",
				textarea:"",
				imgArr:[]
			}
		},
		methods: {
			radioChange(evt) {
				this.current = evt.detail.value
			},
			detele(i) {
				this.imgArr.splice(i, 1);
			},
			handleSave(){
				if(!this.current) {
					uni.showToast({
						icon:"none",
						title:"请选择违规内容"
					})
					return;
				}
				if(!this.textarea) {
					uni.showToast({
						icon:"none",
						title:"请输入举报描述"
					})
					return;
				}
				// if(this.imgArr.length==0) {
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:"请添加证明材料"
				// 	})
				// 	return;
				// }
				uni.showToast({
					icon:"none",
					title:"举报成功，我们将尽快处理！"
				})
				setTimeout(()=>{
					this.$handleOpenUrl("",2)
				},2000)
			},
			handleChooseImg() {
				uni.chooseImage({
					count: 5,
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: "original",
					success: res => {
						let size = parseFloat(res.tempFiles[0].size / 1024 / 1024).toFixed(2)
						if (size > 10) {
							uni.showToast({
								title: '请上传10M以内的图片',
								icon: 'none'
							})
							return
						}
						res.tempFilePaths.map(item => {
							getUploadImage({
								file: item,
							}).then(response => {
								let data = JSON.parse(response)
								if (data.code == 0) {
									this.imgArr.push(data.data.url)
								}
							})
						})
			
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background: #F7F9FE;
	}
</style>
<style lang="scss" scoped>
	

	.report {
		padding: 25upx 30upx 188upx 30upx;
		.center{
			border-top:1upx solid #F7F9FE;
		}
		.top {
			background: #FFFFFF;
			border-radius: 8upx;

			.h1 {
				padding-top: 32upx;
				padding-left: 36upx;
				padding-bottom: 37upx;
				font-size: 36upx;
				color: #333333;
			}

			.ul {

				.li {

					.group {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						label {
							padding-left: 5%;
							display: flex;
							align-items: center;
							width: 45%;
							margin-bottom: 42upx;
							
							font-size: 28upx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #666666;
						}

					}
				}
			}
		}
		.center2{
			textarea{
				height: 130upx;
				padding-top: 37upx;
				
				font-size: 28upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;
			}
			.i{
				text-align: right;
				margin-right: 30upx;
				
				font-size: 28upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;
			}
		}
		.bottom{
			.txt{
				font-size: 24upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				margin: 0 32upx;
			}
			.main_upload {
				height: auto;
				background: #fff;
				margin-top: 2upx;
				display: flex;
				flex-wrap: wrap;
				padding-left: 36upx;
				padding-bottom: 20upx;
			
				.card-upload {
					width: 148upx;
					height: 148upx;
					border-radius: 8upx;
					display: flex;
					justify-content: center;
					align-items: center;
			
					image {
						width: 148upx;
						height: 148upx;
					}
				}
			
				.img_preview {
					width: 140upx;
					height: 140upx;
					position: relative;
					margin-right: 30upx;
					margin-bottom: 45upx;
			
					img {
						width: 140upx;
						height: 140upx;
					}
			
					i {
						width: 29upx;
						height: 29upx;
						display: inline-block;
						background: url("https://oss-shop.cciinet.com/files/MiniProgram/delete_icon.png") no-repeat;
						background-size: 100% 100%;
						position: absolute;
						right: -14upx;
						top: -14upx;
					}
				}
			
				.img_preview:nth-child(4n) {
					margin-right: 0;
				}
				
			}
		}
	
	}
	.btn1{
		width: 100%;
		height: 98upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		.btn{
			margin: 0 50upx;
			height: 90upx;
			background: linear-gradient(0deg, #FDA033, #FF5A03);
			border-radius: 45upx;
			font-size: 36upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90upx
		}
	}
</style>
